<template>
	<div class="sector_chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import eleResize from 'element-resize-detector';
import { feedbackStatData } from '@/api/system/sysFeedback';
export default {
	data() {
		return {
			chartData: [],
			swchart: null,
			option: {
				series: {
					type: 'pie',
					radius: '50%',
					data: [],
					label: {
						show: true,
						formatter: '{name|{b}} ({count|{c}条})\n{ratio|{d}%}',
						rich: {
							name: { fontSize: 16, lineHeight: 24 },
							count: { fontSize: 14 },
							ratio: { fontSize: 18, fontWeight: 'bold' }
						}
					},
					labelLine: { length: 80, length2: 100 },
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			}
		};
	},
	watch: {
		chartData: {
			handler(arr) {
				let dataArr = arr.map((item) => {
					let obj = { value: Number(item.scount) };
					obj['name'] = (() => {
						if (item.filed1 === '0') {
							return '未打分';
						} else if (item.filed1 === '1') {
							return '极差';
						} else if (item.filed1 === '2') {
							return '失望';
						} else if (item.filed1 === '3') {
							return '一般';
						} else if (item.filed1 === '4') {
							return '满意';
						} else if (item.filed1 === '5') {
							return '惊喜';
						}
					})();
					return obj;
				});
				this.option.series.data = [...dataArr];
				this.$nextTick(() => {
					this.swchart.setOption(this.option);
				});
			},
			immediate: true
		}
	},
	mounted() {
		this.getFeedbackChartData();
		this.initializeEcharts();
	},
	methods: {
		//获取反馈图表数据
		async getFeedbackChartData() {
			let result = await feedbackStatData().then((res) => res.data);
			if (result.code === '0') {
				this.chartData = result.data || [];
			}
		},

		initializeEcharts() {
			this.swchart = echarts.init(this.$refs.chart);
			eleResize().listenTo(this.$refs.chart, (ele) => {
				this.$nextTick(() => {
					this.swchart.resize();
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.sector_chart {
	flex: 1;
	overflow: hidden;
}
</style>
